<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>招聘网中的简历模板</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <!--    字体图标文件-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <!--    自定义样式-->
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
<div class="row">
    <!--    左侧信息栏-->
    <div class="col-sm-12 col-md-3 left">
        <div class="row justify-content-between">
            <div class="col-6 col-sm-5 col-md-12 p-4">
                <img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt="userPhoto"
                     class="img-fluid p-2 border">
                <h3 class="text-white text-center">白鹭</h3>
                <h5 class="text-center">求职意向:网站开发</h5>
            </div>
            <div class="col-6 col-sm-5 col-md-12 p-5 p-md-4">
                <h4>出生年月</h4>
                <p>1995年10月10号</p>
                <h4>联系电话</h4>
                <p>12343212345</p>
                <h4>电子邮箱</h4>
                <p>abcd1234@qq.com</p>
                <h4>联系地址</h4>
                <p>北京市朝阳区</p>
            </div>
        </div>
    </div>
    <div class="col-sm-12 col-md-9 right p-0">
        <!--        导航栏-->
        <div class="my-4">
            <ul class="clearfix">
                <li class="float-sm-left">
                    <i class="fa fa-user-circle-o fa-2x">
                        <a href="index.html" class="ml-2">个人履历</a>
                    </i>
                </li>
                <li class="float-sm-left mx-sm-5">
                    <i class="fa fa-envelope-o fa-2x">
                        <a href="contact.html" class="ml-2">请给我发邮件</a>
                    </i>
                </li>
                <li class="float-sm-left">
                    <i class="fa fa-home fa-2x">
                        <a href="photo.html" class="ml-2">照片</a>
                    </i>
                </li>
            </ul>
        </div>
<!--        生活照-->
        <h5 class="color1">生活照</h5>
        <div class="px-5 py-5 photo">
            <div class="card-columns">
                <div class="card bg-primary p-3">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592923294088&di=c781b4b47548a8c48332baf9b568b9db&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2Fb%2F62%2Ff0de1477973.jpg" class="card-img-top" alt="">
                </div>
                <div class="card bg-dark p-3">
                    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3415915083,1709426510&fm=15&gp=0.jpg" class="card-img-top" alt="">
                </div>
                <div class="card bg-info p-3">
                    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3744498486,1368806164&fm=15&gp=0.jpg" class="card-img-top" alt="">
                </div>
                <div class="card bg-success p-3">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592923294087&di=f9c62d249f6d07788a7646108539b666&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F08%2F20161208132804_2JGBW.thumb.700_0.jpeg" class="card-img-top" alt="">
                </div>
                <div class="card bg-danger p-3">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592923345009&di=521adb0e65a96df02a15489ed595f836&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2249283653%2C1480830410%26fm%3D214%26gp%3D0.jpg" class="card-img-top" alt="">
                </div>
            </div>
        </div>
    </div>

<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>